<template>
  <Panel title="服务区信息" class="service-area" v-bind="$attrs">
    <div class="process-chart">
      <div class="chart">
        <!-- 进度条表示服务区入率 -->
        <div class="progress-dashboard">
          <ProgressDashboard :progressData="carSaturation"></ProgressDashboard>
        </div>
        <div class="statistical">
          <div class="total">
            <span class="number">{{ carSaturation || '-' }}</span>
            <span class="unit">%</span>
          </div>
          <!-- <div class="title">车位饱和度</div> -->
        </div>
      </div>
      <div class="detail">
        <div>
          <span>入区率：</span>
          <span>{{ areaRatio || '-' }}%</span>
        </div>

        <div>
          <span>入区流量(万辆)：</span>
          <span>{{ intoAreaTraffic }}</span>
        </div>
      </div>
    </div>
    <div class="saturation-rank">
      <h4 class="center">饱和度排名</h4>
      <div class="city-rank">
        <div class="city-list">
          <div class="city-row" v-for="(item, i) in saturationRank" :key="i">
            <span :class="i < 3 ? `top-three no-${i + 1}` : 'last'">
              {{ i > 2 ? i + 1 : null }}
            </span>
            <span class="name">{{ item.serviceName }}</span>
            <span class="accounted">{{ item.utilization ? (item.utilization * 100).toFixed(2) + '%' : '' }}</span>
          </div>
        </div>
      </div>
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'ServiceArea'
}
</script>
<script setup>
/**
 * @desc 服务区信息(一级)
 * @auther 阳坤
 * @date 2022/10/27
 *
 **/

import Panel from '../../components/panel'
import ProgressDashboard from '../../components/charts/ProgressDashboard.vue'
import serviceAreaApi from '../../api/service-area.js'
import useDefaultEmits from '@/hooks/useDefaultEmits'
import useWatchStore from '@/hooks/useWatchStore'
import { ref, defineProps, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { get } from '@/utils'
const store = useStore()

const props = defineProps({
  routeName: {
    // 该组件所属路由名
    type: [String],
    default: ''
  }
})
const { proxy } = getCurrentInstance()

// 车位饱和度
const carSaturation = ref()
// 入区流量
const intoAreaTraffic = ref()
// 入区率
const areaRatio = ref()
// 饱和度排名
const saturationRank = ref()

/**
 * 获取数据
 */
const getData = (argParams, action) => {
  const params = {
    // roadType: argParams.roadType,
    // province: '32',
    // city: argParams.areaCode
    // deptId: '402880465ab1160c015ab1d51641007e',
    deptId: get(store, 'state.user.userInfo.orgInfos.0.orgId'), // '8a819e536521ad6f0165994f55130033' ||,
    bussinessCode: get(store.state, 'user.bussinessType')
  }
  serviceAreaApi
    .getServiceAreaStatistic(params)
    .then(res => {
      if (res.data) {
        // carSaturation.value = res.data.saturationParkingSpace
        // intoAreaTraffic.value = res.data.intoAreaTraffic
        // areaRatio.value = res.data.areaRatio
        saturationRank.value = res.data.filter((item, index) => index < 3)
      }
    })
    .catch(() => {
      proxy.$message.error(`数据获取失败！`)
    })
}

/**
 * 触发点击emit事件
 */
useDefaultEmits()
/**
 * 初始化以及监听地市编码跟路网类型
 */
useWatchStore(getData)
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.service-area {
  cursor: pointer;
  :deep(.mz-panel-content-main) {
    flex-direction: initial !important;
    justify-content: space-between;

    .process-chart {
      width: 40%;
      display: flex;
      flex-direction: column;

      .chart {
        position: relative;
        flex: 1;

        .progress-dashboard {
          width: 100%;
          height: 100%;
        }

        .statistical {
          position: absolute;
          top: 68%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;

          .total {
            font-size: 30px;
            font-weight: 700;
            color: @primary-color;
            line-height: 20px;

            .unit {
              font-size: 16px;
            }
          }

          .title {
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Medium;
            font-weight: 600;
            color: #333333;
          }
        }
      }

      .detail {
        font-size: 12px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #666666;
        text-align: center;
      }
    }

    .saturation-rank {
      width: 55%;
      display: flex;
      flex-direction: column;

      .center {
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        color: #333333;
      }

      .city-rank {
        flex: 1;
        display: flex;
        flex-direction: column;

        .city-list {
          width: 100%;
          height: 100%;
          overflow-y: auto;
        }

        .city-row {
          display: flex;
          color: #666;
          align-items: center;
          padding: 0 2px;
          height: 30px;
          line-height: 30px;
          border-bottom: 1px dashed #d1d8e4;

          &:first-child {
            border-top: 1px dashed #d1d8e4;
          }

          .name {
            flex: 1;
            margin-left: 10px;
          }

          .accounted {
          }
        }

        .top-three {
          width: 15px;
          height: 19px;
        }

        .no-1 {
          background: url('../../assets/images/no-1.png') no-repeat;
          background-size: 100%;
        }

        .no-2 {
          background: url('../../assets/images/no-2.png') no-repeat;
          background-size: 100%;
        }

        .no-3 {
          background: url('../../assets/images/no-3.png') no-repeat;
          background-size: 100%;
        }

        .last {
          background-color: #93b7d2;
          color: #e4edf4;
          width: 14px;
          height: 14px;
          line-height: 14px;
          border-radius: 50%;
          text-align: center;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
